<% 
  var isAdd=isEmpty(broadband.id);
  var headContent = {
%>
<style type="text/css">
  /*验证：提示信息样式 begin*/
   .am-alert-danger {
      background-color: transparent;
      border-color: transparent;
      color: red;
    }
    .am-alert {
      margin-bottom: 1em;
      padding: .625em;
      background: transparent;
      border: none;
      border-radius: 0;
    }
    /*验证：提示信息样式 end*/
</style>
<%};%>
<%layout("/common/_layout.html",{head:headContent}){%>
<form id="form"  method="POST" class="am-form" action="<%if(isAdd){%>${base}/broadband/save<%}else{%>${base}/broadband/update<%}%>">
  <div class="am-cf am-padding">
    <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg" onclick="window.history.back(); return false;">宽带预约管理</strong> / <small>宽带商品配置</small></div>
  </div>
<input type="hidden" name="broadband.id" value="${broadband.id!}" />
<input type="hidden" class="am-input-sm" name="businessId" id="businessId" value="${businessId!''}"/>
  <!--选项卡（tabs）begin-->
  <div class="am-tabs am-margin" data-am-tabs>
    <ul class="am-tabs-nav am-nav am-nav-tabs">
      <li class="am-active"><a href="#tab1">宽带商品配置信息</a></li>      
    </ul>
    <div class="am-tabs-bd">
      <div class="am-tab-panel am-fade am-in am-active" id="tab1">
          <!--验证表单元素（validate) begin-->
          <!--input begin-->
          <!-- <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
              预约类型：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
               <select data-am-selected   >
                    <option value="2">宽带预约</option>
                  </select> 
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
          </div> -->
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
              <span  style="color: red;">*</span>业务名称：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
               <input type="text" class="am-input" data-validation-message="业务名称不能为空" placeholder="请输入业务名称" name="broadband.name" value="${broadband.name!}" maxlength="50" required/>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg">
              <div class="am-alert am-alert-danger">${broadbandNameMessages!}</div>
            </div>
          </div>
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
              <span  style="color: red;">*</span>业务简介：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
               <input type="text" class="am-input" data-validation-message="业务简介不能为空" placeholder="请输入业务简介" name="broadband.business_summary" value="${broadband.business_summary!}" maxlength="100" required/>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg">
              <div class="am-alert am-alert-danger">${broadbandBusinessSummaryMessages!}</div>
            </div>
          </div>
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
              业务介绍：
            </div>
            <div class="am-u-sm-8 am-u-md-10">
              <textarea rows="30" id="container" name="broadband.introduction"  style="width:auto;height:400px;">${broadband.introduction!}</textarea>
            </div>
            <!-- <div class="am-u-sm-2 am-u-md-4 input-msg"></div> -->
          </div>
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
              <span  style="color: red;">*</span>所属城市：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
               <input type="text" class="am-input" data-validation-message="所属城市不能为空" placeholder="请输入所属城市" name="broadband.city" value="${broadband.city!}" maxlength="50" required/>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg">
              <div class="am-alert am-alert-danger">${broadbandCityMessages!}</div>
            </div>
          </div>
           <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
             宽带价格：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
               <input type="text" class="am-input js-pattern-sort" data-validation-message="价格只能是纯数字" name="broadband.price" value="${broadband.price!''}" maxlength="10" />
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg">
              <div class="am-alert am-alert-danger">${broadbandPriceMessages!}</div>
            </div>
          </div>
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
             计费周期：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
              <select data-am-selected  name="broadband.period">
                <option value="月" <%if(broadband.period! == "月") {%>selected<%}%>>月</option>
                <option value="年" <%if(broadband.period! == "年") {%>selected<%}%>>年</option>
              </select> 
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
          </div>
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
             宽带带宽：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
               <input type="text" class="am-input" name="broadband.width" value="${broadband.width!}" maxlength="50"/>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
          </div>
           <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
             宽带商家类型：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
              <select data-am-selected name="broadband.broad_type">
                <option value="1" <%if(broadband.broad_type! == 1) {%>selected<%}%>>优家类型</option>
                <option value="0" <%if(broadband.broad_type! == 0) {%>selected<%}%>>爱家类型</option>
                <option value="2" <%if(broadband.broad_type! == 2) {%>selected<%}%>>商务动力</option>
                <option value="3" <%if(broadband.broad_type! == 3) {%>selected<%}%>>校园套餐</option>
              </select> 
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
          </div>
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
             宽带品牌：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
               <input type="text" class="am-input" name="broadband.brand" value="${broadband.brand!}" maxlength="50"/>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
          </div>
          <!-- <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
             初装费：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
               <input type="text" class="am-input" name="broadband.first_install_cost" value="${broadband.first_install_cost!}" maxlength="50"/>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
          </div>
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
             成员手机号的数量：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
               <input type="text" class="am-input" name="broadband.member_phone_count" value="${broadband.member_phone_count!}" maxlength="50"/>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
          </div> -->
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
             资费代码：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
               <input type="text" class="am-input" name="broadband.business_code" value="${broadband.business_code!}" maxlength="50"/>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
          </div>
  
<!--      
           <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
            适用范围：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
              <select data-am-selected  name="broadband.business_type">
                <option value="1" <%if(broadband.business_type! == 1) {%>selected<%}%>>开户</option>
                <option value="2" <%if((broadband.business_type! == 2)||(isAdd)) {%>selected<%}%>>预约</option>
                <option value="3" <%if(broadband.business_type! == 3) {%>selected<%}%>>开户和预约</option>
              </select> 
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg"></div>
          </div>
          -->
   
        
<div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
            适用范围：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
                     <input type="checkbox"  value="0" id="apply_open" name="apply_open" <%if((broadband.business_type! == 1)||(broadband.business_type! == 3)) {%>checked<%}%> />开户
                     <input type="checkbox"  value="0" id="apply_reserve" name="apply_reserve" <%if((isAdd)||(broadband.business_type! == 2)||(broadband.business_type! == 3)) {%>checked<%}%> />预约
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg am-hide"  style="color: red;" id="apply_err_msg"> <span>*</span>请选择适用范围！
            </div>
          </div>
          <div class="am-g am-form-group am-margin-top">
            <div class="am-u-sm-4 am-u-md-2 am-text-right">
              <span  style="color: red;">*</span>排序数字：
            </div>
            <div class="am-u-sm-6 am-u-md-6">
               <input type="text" class="am-input js-pattern-sort" data-validation-message="排序不能为空且只能是纯数字" name="broadband.order_num" value="${broadband.order_num!'1'}" placeholder="请输入纯数字,越小越向前" maxlength="11" required/>
            </div>
            <div class="am-u-sm-2 am-u-md-4 input-msg">
              <div class="am-alert am-alert-danger">${broadbandOrderNumMessages!}</div>
            </div>
          </div>
          <!--验证表单元素（validate end-->
      </div>
      </div>
  </div>
  <!--选项卡（tabs）end-->
</form>
  <div class="am-margin">
    <button type="button" id="submit" class="am-btn am-btn-primary am-btn-xs">提交保存</button>
    <button type="button" class="am-btn am-btn-warning am-btn-xs" onclick="window.history.back(); return false;">返回上一级</button>
  </div>
<script type="text/javascript" src="${base}/ueditor/ueditor.config.js?jid=2"></script>
<script type="text/javascript" src="${base}/ueditor/ueditor.all.min.js?jid=2"></script>
<script type="text/javascript" src="${base}/ueditor/ueditor.parse.min.js?jid=2"></script>
<script type="text/javascript">
  $(function(){
    /*富文本编辑器：ueditor begin*/
    var ue = UE.getEditor('container');
    /*富文本编辑器：ueditor end*/
    /*表单验证：begin*/
    //自定义规则，用法：验证元素上加class="js-pattern-sort"
    if ($.AMUI && $.AMUI.validator) {
      $.AMUI.validator.patterns.sort = /^([0-9]+)$/;
    }
    $("#form").validator({
      // 域通过验证时回调
      onValid: function(validity) {
        $(validity.field).closest('.am-form-group').find('.am-alert').hide();
      },
      // 验证出错时的回调， validity 对象包含相关信息，格式通 H5 表单元素的 validity 属性
      onInValid: function(validity) {
        var $field = $(validity.field);
        var $group = $field.closest('.am-form-group');
        var $alert = $group.find('.am-alert');
        // 使用自定义的提示信息 或 插件内置的提示信息
        var msg = $field.data('validationMessage') || this.getValidationMessage(validity);

        if (!$alert.length) {
          $alert = $("<div class='am-alert am-alert-danger'></div>").hide().
          appendTo($group.find(".input-msg"));
        }
        console.log("onInValid : "+$field.val());
        $alert.html(msg).show();
       }
      
    });
    /*是否启用switch开关 begin*/
    $("#enabled").on({
      "switchChange.bootstrapSwitch": function(event, state) {
        var $enabled = $("input[name='broadband.enabled']");
        if(state) {
          $enabled.val(1);
        }else{
          $enabled.val(0);
        }
        //console.log($enabled.val());
      }
    });
    
    $("#submit").on("click",function(){
         if(!checkApply()){
            return;
         }
         
         //传值，开户选中为1，预约选中为2,。后台直接进行相加。
         if($("#apply_open").is(':checked')){
              $("#apply_open").val("1");
         }else{
              $("#apply_open").val("0");
         }
         if($("#apply_reserve").is(':checked')){
              $("#apply_reserve").val("2");
         }else{
              $("#apply_reserve").val("0");
         }
                 
         $("#form").submit();
    });
    
    $("input[type='checkbox']").on("click",function(){
         checkApply();
    });
    
    /*表单验证：end*/
  });
  
  var checkApply = function(){
        $checkbox = $("input[type='checkbox']");
        for(var i = 0;i<$checkbox.length;i++){
            if($checkbox[i].checked){
               break;
            }
         }
         if(i>=$checkbox.length){
             if( $("#apply_err_msg").hasClass("am-hide") ){
                 $("#apply_err_msg").removeClass("am-hide");
             }
             return false;
         }
         
         if(!$("#apply_err_msg").hasClass("am-hide")){
                 $("#apply_err_msg").addClass("am-hide");
         }
         return true;
  };
  
</script>
<%}%>